<template>
	<view class="content">
		<view class="main">
			<view v-for="(e,index) in arr" :key="index">{{e}}</view>
		</view>
		<view class="foot">
			<input type="text" class="cont" v-model="cont">
			<button @tap="send">提交</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cont: 'Hello',
				arr:[],
				// arr:['你好啊','我很好','今天天气很好啊','我的心情也很好'],
			}
		},
		onLoad() {
			// 前端接收到消息后，还有最后一步，要把这个消息给渲染出来
			 this.getmsg();p
		},
		methods: {
		  send(){
			  if(this.cont.length > 0){
				  // 至少要让它有东西可发，没有东西就不要让它发了
			  this.arr.push(this.cont)
				  // 我们前端输入的内容可以使用一个变量名进行保存
				  let info = this.cont;
				  this.socket.emit('message',info)
				  // emit就是用来发送信息的
				  
				  // 然后我们回到服务端，来接收一下客户端发过来的信息
			  }
		  },
		  // 接收服务器要广播的信息
		  // 前端接收信息的代码和后端接收的代码是一样的
		  getmsg(){
			  this.socket.on('broadcastmessage',data=>{
				  this.arr.push(data)
			  })
		  }
		}
	}
</script>

<style lang="scss">
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}


	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
	
	.foot{
		position: fixed;
		width: 100%;
		bottom: 0;
		.cont{
			width: 100%;
			height: 80rpx;
			background-color: #eee;
		}
	}
</style>
